<template>
	<!-- content: "bbb"
createTime: 1709541357800
customerName: "Pomum adami"
headImg -->
	<view class="evaluate-mian-item">
		<view class="evaluate-card-left"><view class="header-img" :style="{ backgroundImage: 'url( ' + item.headImg + ' )' }"></view></view>
		<view class="evaluate-card-right">
			<view class="header-person">
				<view class="evaluate-info-name">{{ !item.customerName ? '无昵称' : item.customerName }}</view>
				<view class="evaluate-info-date" v-if="item.createTime">{{ item.createTime | timeFormat('yyyy-mm-dd') }}</view>
			</view>
			<view class="evaluate-info-content">{{ item.content }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	components: {},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.evaluate-mian-item {
	display: flex;
	width: 100%;
	height: 100%;
}

.evaluate-card-left {
	width: 68rpx;
	height: 68rpx;
	margin-right: 20rpx;
	.header-img {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 50%;
	}
}

.evaluate-card-right {
	width: calc(100% - 88rpx);
	font-family: 'SourceHanSansCN-Regular';
	.header-person {
		height: 68rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-bottom: 20rpx;

		.evaluate-info-name {
			font-family: 'SourceHanSansCN-Medium';
			color: $main-text-color-gray-33;
			font-size: $main-text-size-28;
			margin-bottom: 8rpx;
		}
		.evaluate-info-date {
			color: $main-text-color-grey;
			font-size: $main-text-size-20;
		}
	}
	.evaluate-info-content {
		font-size: $main-text-size-28;
		color: $main-text-color-gray-33;
		word-break: break-all;
		word-wrap: break-word;
	}
}
</style>
